<template>
  <div class="data-table-container">
    <h3 class="data-table-container__title">{{ title }}</h3>
    <div class="scrolling-data">
      <div v-for="(item, index) in data" :key="index" class="data-row">
        <span class="data-name">{{ item.name }}</span>
        <span class="data-value">{{ item.value }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
interface DataItem {
  name: string
  value: string
}

interface Props {
  title: string
  data: DataItem[]
}

defineProps<Props>()
</script>

<style scoped>
.data-table-container {
  background: rgba(30, 58, 95, 0.6);
  border: 1px solid rgba(74, 144, 226, 0.3);
  border-radius: 8px;
  padding: 20px;
  backdrop-filter: blur(10px);
  flex: 0 0 30%;
  min-height: 200px;
}

.data-table-container__title {
  margin: 0 0 15px 0;
  font-size: 16px;
  color: #4a90e2;
  border-bottom: 1px solid rgba(74, 144, 226, 0.3);
  padding-bottom: 10px;
}

.scrolling-data {
  height: calc(100% - 50px);
  overflow-y: auto;
}

.data-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(74, 144, 226, 0.1);
  transition: all 0.3s ease;
}

.data-row:hover {
  background: rgba(74, 144, 226, 0.1);
  padding-left: 10px;
}

.data-name {
  color: #b0c4de;
  font-size: 14px;
}

.data-value {
  color: #4a90e2;
  font-weight: 500;
  font-size: 14px;
}

/* 滚动条样式 */
.scrolling-data::-webkit-scrollbar {
  width: 6px;
}

.scrolling-data::-webkit-scrollbar-track {
  background: rgba(74, 144, 226, 0.1);
  border-radius: 3px;
}

.scrolling-data::-webkit-scrollbar-thumb {
  background: rgba(74, 144, 226, 0.5);
  border-radius: 3px;
}

.scrolling-data::-webkit-scrollbar-thumb:hover {
  background: rgba(74, 144, 226, 0.7);
}
</style>